<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件总线</title>
        <style>
            v-cloak { display: none; }
            .wrapper { border: 1px solid blue ; }
            .input-wrapper { padding: 10px; border: 1px solid #ff7033; margin: 10px; }
            .show-wrapper { padding: 10px; border: 1px solid #080; margin: 10px; }
        </style>
    </head>
    <div>

        <h3>用事件总线在任意组件之间通信</h3>

        <div id="first" v-cloak></div>

        <!--引入 vue.js 核心库-->
        <script src="vue@3.2.45.js" type="text/javascript"></script>
        <!--引入 mitt 库-->
        <script src="mitt@3.0.0.js" type="text/javascript"></script>
        <!--最后编写自己的JavaScript代码-->
        <script>

            const InputBox = {
                template: `<div class="input-wrapper">
                               <input type="text" v-model="message" placeholder="请输入">
                               {{message}}
                           </div>`,
                data() {
                    return {
                        message: ''
                    }
                },
                watch: {
                    message(newValue,old){
                        // 触发事件
                        // 要明确事件名称，若需要传递参数则可以指定第二个参数
                        this.$bus.emit( this.$inEventName, newValue );
                    }
                }
            }

            const ShowBox = {
                template: `<div class="show-wrapper">
                               {{content}}
                           </div>`,
                data() {
                    return {
                        content: ''
                    }
                },
                methods: {
                    changeContent(value) {
                        console.log( '接收到的参数是:', value );
                        this.content = value;
                    }
                },
                created() {
                    // 注册事件监听器
                    // 需要明确 事件名称 和 事件监听器
                    this.$bus.on( this.$inEventName, this.changeContent );
                }
            }

            const app = Vue.createApp({
                components: {
                    InputBox,
                    ShowBox
                },
                template: `<div class="wrapper">
                              <InputBox></InputBox>
                              <ShowBox></ShowBox>
                           </div>`,
                beforeCreate() {
                    // 通过组件可以直接访问全局属性
                    console.log( this.$bus );
                }
            });
            // 配置全局属性 (这里的`$bus`就是全局属性名)
            app.config.globalProperties.$bus = mitt();
            app.config.globalProperties.$inEventName = '输入';
            app.mount('#first');
        </script>
    </div>
</html>